import React,{
  memo
} from 'react';
import { Pagination,Dropdown, Space   } from 'antd';
import type { MenuProps } from 'antd';
import { CaretDownFilled} from '@ant-design/icons';

function RzList(){
  const items: MenuProps['items'] = [
    {
      key: '0',
      label: "删除日志"
    },
    {
      key: '1',
      label: "修改分类"
    },
    {
      key: '2',
      label: "设置置顶"
    },
    {
      key: '3',
      label: "转为私密日志"
    },
  ]

 let dataArr = [
   {id:1},
   {id:1},
   {id:1},
   {id:1},
   {id:1},
   {id:1},
   {id:1},
 ]
  const listItem = ( dataArr.map((item,i)=>
    <div key={i} className="rz-list-item">
    <div className="rz-l">
      <span>[转]</span>
      日志标题日志标题日志标题日志标题日志标题日志标题日志标题日志标题日志标题日志标题日志标题
    </div>
    <div className="rz-r">
      <span>2024/02/04 </span>
      <Dropdown menu={{ items }}>
        <span>编辑 <CaretDownFilled className="icon"/></span>
      </Dropdown>
    </div>
  </div>)  );


  return <>
    <div className="rzList-main">
       <div className="rzList-item-box">
         {listItem}
       </div>
      <div className="rzList-bottom">
        <Pagination align={"center"}
                    showTotal={(total) => `总共 ${total} 条`}
                    showSizeChanger showQuickJumper
                    size="small" total={50} />
      </div>

    </div>
  </>
}
export default  memo(RzList);
